<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" :is-back="true" title="市场/项目板块设置"></my-header>
		
		<view>
			<view class="main-zhong4">
				<!--市场部门-->
				<block v-for="(item, index) in list" :key="index">
					<view>
						<view class="dis_flex ali-ite">
							<u-icon size="28" :name="imgurl+'my-companyPost-shichang.png'"></u-icon>
							<view class="mar-lef-3">{{item.name}}</view>
							<u-icon @click="deleteFun(item.id)" class="mar-lef-3" size="36" color="#19BE6B" :name="imgurl+'my-market-addMarket-shanchu2.png'"></u-icon>
						</view>
					</view>
					<u-gap height="2" margin-top="20" margin-bottom="20" bg-color="#bbb"></u-gap>
				</block>
				
			</view>
			<view @click="addShow = true" class="main-zhong4 mar-top-10 dis_flex jus-cen">
				<view><u-icon size="38" :name="imgurl+'my-companyPost-xinzeng.png'"></u-icon></view>
				<view class="mar-lef-5 fon-siz-16">新增公司市场/项目</view>
			</view>
		</view>
		
		<!--新增公司市场/项目-->
		<u-form :model="form" ref="uForm">
			<view>
				<u-modal @confirm="addSub" v-model="addShow" :mask-close-able="true" title="新增市场/项目" show-title="true" :show-confirm-button="false" >
					<view class="slot-content">
						<u-form-item :required="true" label-width="110px" label="市场/项目名称" prop="name" :border-bottom="false">
							<u-input :clearable="false" placeholder="请输入市场/项目名称" placeholder-style="font-size:11px;" v-model="form.name" :custom-style="shuomingStyle" />
						</u-form-item>
						<view class="address" style="margin:30rpx 0 0rpx 0;">
							<button @click="addShow = false" type="warn">取消</button>
							<button @click="addSub()" style="background:#0051BA" type="primary" >提交</button>
						</view>
					</view>
				</u-modal>
			</view>
		</u-form>
		
		<!--删除确认按钮-->
		<u-modal @confirm="deleteTj()" v-model="deleteShow" :mask-close-able="true" show-title="true" show-cancel-button="true">
			<view class="slot-content">
				<rich-text>是否删除该市场/项目</rich-text>
			</view>
		</u-modal>
		
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				id : '',
				deleteShow : false,
				addShow : false,
				list : '',
				background	: {
					backgroundColor: ' ',
				},
				form : {
					name : '',
				},
				rules: {
					name: [
						// 对name字段进行必填验证
						{
							required: true,
							message: '名称不能为空！',
							trigger: ['change','blur']
						},
					],
				},
			}
		},
		methods:{
			// 删除确认
			deleteFun(id){
				this.id = id 
				this.deleteShow = true
			},
			// 删除市场/项目
			async deleteTj(){
				let data = {
					id : this.id ,
				}
				let res = await this.asyncPublic('/my/Market/delete',data)
				this.list = res.data.list
				console.log(res)
				if( res.data.code == 200 )
				{
					this.$refs.uToast.show({
						title: res.data.message,
						type: 'success',
					})
				}
				this.addShow = false
				this.load_close();
			},
			// 新增市场/项目
			addSub(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.load();
						this.Sub();
						this.addSonShow = false
					} else {
						console.log('验证失败');
					}
				});
			},
			// 新增市场/项目
			async Sub(){
				let data = {
					name : this.form.name ,
				}
				let res = await this.asyncPublic('/my/Market/add',data)
				this.list = res.data.list
				console.log(res)
				if( res.data.code == 200 )
				{
					this.$refs.uToast.show({
						title: res.data.message,
						type: 'success',
					})
				}
				this.addShow = false
				this.load_close();
			},
			// 首次查询事件
			async onSelect(){
				let res = await this.asyncPublic('/my/Market/onSelect',1)
				this.list = res.data.list
				this.load_close();
			},
		},
		onLoad() {
			this.load();
			this.onSelect()
		},
		// 下拉改变头部背景色
		onPageScroll(res) {
			if( res.scrollTop > 0 )
			{
				this.background.backgroundColor = '#005687';
			}else{
				this.background.backgroundColor = ' ';
			}
		},
		components:{
			myHeader,
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.address{
		display:flex;
		align-items: center;
		justify-content: space-between;
		margin-top:10rpx;
	}
	.address button{
		font-size:13px;
		width:140px;
		border-radius: 20px;
	}
	.address h2{
		width:180rpx;
		text-align:center;
		border:1rpx solid #ccc;
		padding:10rpx 0 10rpx 0;
	}
	.u-tag{
		margin-top:10px !important;
		margin-right:10px !important;	
	}
	.slot-content{
		padding:20px;
		font-size:18px;
		color:red;
		text-align: center;
	}
	.main-zhong4 {
		width: 100%;
		border-radius: 8px;
		background: #fff;
		padding:10px 20px 10px 20px;
	}
	.main {
		padding:10px;
		position: relative;
		min-height:100vh;
		background-image: linear-gradient( #005687, #E4E4E5 );
	}
	page{
		height:100%;
	}
</style>
